<template>
	<view class="container">
		<view class="example">
			<u--form labelPosition="left" :rules="rules" :model="pwdForm" ref="uForm" labelWidth="120">
				<!-- 原密码 -->
				<u-form-item label="原密码" prop="oldPwd" required>
					<u--input v-model="pwdForm.oldPwd" clearable placeholder="请输入原密码" type="password"></u--input>
					<u--text v-if="oldPwdError" color="#ff3333" class="error-text">{{ oldPwdError }}</u--text>
				</u-form-item>

				<!-- 新密码 -->
				<u-form-item label="新密码" prop="newPwd" required>
					<u--input v-model="pwdForm.newPwd" clearable placeholder="6-20位，包含字母和数字" type="password"
						@input="checkPasswordStrength"></u--input>

					<!-- 密码强度提示 -->
					<view class="strength-container" v-if="pwdForm.newPwd.length > 0 && false">
						<view class="strength-text">密码强度：{{ strengthText }}</view>
						<view class="strength-bars">
							<view class="strength-bar" :class="strength >= 1 ? 'active' : ''"
								:style="{background: strength >= 1 ? strengthColor : '#eee'}"></view>
							<view class="strength-bar" :class="strength >= 2 ? 'active' : ''"
								:style="{background: strength >= 2 ? strengthColor : '#eee'}"></view>
							<view class="strength-bar" :class="strength >= 3 ? 'active' : ''"
								:style="{background: strength >= 3 ? strengthColor : '#eee'}"></view>
						</view>
					</view>
				</u-form-item>

				<!-- 确认新密码 -->
				<u-form-item label="确认密码" prop="confirmPwd" required>
					<u--input v-model="pwdForm.confirmPwd" clearable placeholder="请再次输入新密码" type="password"></u--input>
				</u-form-item>
			</u--form>

			<button type="primary" @click="submit" :disabled="isSubmitting" style="margin-top: 20px;">
				{{ isSubmitting ? '提交中...' : '确认修改' }}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		updatePassword
	} from '@/common/api.js'
	export default {
		data() {
			return {
				pwdForm: {
					oldPwd: '',
					newPwd: '',
					confirmPwd: ''
				},
				rules: {
					oldPwd: {
						required: true,
						message: '请输入原密码',
						trigger: ['blur', 'change']
					},
					newPwd: [{
							required: true,
							message: '请输入新密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 20,
							message: '密码长度在6-20位之间',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value) => {
								// 验证是否包含字母和数字
								const hasLetter = /[a-zA-Z]/.test(value)
								const hasNumber = /[0-9]/.test(value)
								return hasLetter && hasNumber
							},
							message: '密码需包含字母和数字',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value) => {
								// 新密码不能与原密码相同
								return value !== this.pwdForm.oldPwd
							},
							message: '新密码不能与原密码相同',
							trigger: ['blur', 'change']
						}
					],
					confirmPwd: [{
							required: true,
							message: '请确认新密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value) => {
								return value === this.pwdForm.newPwd
							},
							message: '两次输入的密码不一致',
							trigger: ['blur', 'change']
						}
					]
				},
				oldPwdError: '', // 原密码验证错误信息
				strength: 0, // 密码强度 0-3
				strengthText: '', // 强度文本描述
				strengthColor: '', // 强度颜色
				isSubmitting: false // 是否正在提交
			}
		},
		onReady() {
			// 兼容微信小程序的规则设置
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 检查密码强度
			checkPasswordStrength(val) {
				let strength = 0
				// 长度检查
				if (val.length >= 8) strength++
				// 包含小写字母
				if (/[a-z]/.test(val)) strength++
				// 包含大写字母或特殊字符
				if (/[A-Z]/.test(val) || /[^a-zA-Z0-9]/.test(val)) strength++

				this.strength = strength

				// 设置强度文本和颜色
				switch (strength) {
					case 0:
						this.strengthText = '弱'
						this.strengthColor = '#ff4d4f'
						break
					case 1:
						this.strengthText = '中'
						this.strengthColor = '#faad14'
						break
					case 2:
					case 3:
						this.strengthText = '强'
						this.strengthColor = '#52c41a'
						break
				}
			},

			// 提交表单
			submit() {
				if (this.oldPwdError) {
					this.$commonFn.msg(this.oldPwdError)
					return
				}

				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						this.isSubmitting = true
						// 调用修改密码接口
						updatePassword({
								password: this.pwdForm.oldPwd,
								newPassword: this.pwdForm.newPwd
							})
							.then(res => {
								this.isSubmitting = false

								if (res.code === '00000') {
									this.$commonFn.msg('密码修改成功，请重新登录')
									// 清除登录状态
									uni.removeStorageSync('token')
									uni.removeStorageSync('userInfo')
									// 跳转到登录页
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/login/login'
										});
									}, 500)
								} else {
									this.$commonFn.msg(res.msg || '修改失败')
								}
								
							})
							.catch(err => {
								this.isSubmitting = false
							})
							.finally(() => {
								this.isSubmitting = false
							})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.error-text {
		font-size: 24rpx;
		margin-top: 10rpx;
		line-height: 1.4;
	}

	.strength-container {
		margin-top: 15rpx;
	}

	.strength-text {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.strength-bars {
		display: flex;
		gap: 8rpx;
		height: 8rpx;
	}

	.strength-bar {
		flex: 1;
		border-radius: 4rpx;
		transition: all 0.3s ease;
	}

	.strength-bar.active {
		height: 8rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		border-radius: 45rpx;
		margin-top: 50rpx;
		background-color: #2e7dfa;
		color: #fff;
		border: none;
	}

	.submit-btn:disabled {
		background-color: #ccc;
		opacity: 0.8;
	}
</style>